<template>
  <div class="app-container">
    <div style="width: 400px;height: 400px;margin: auto;">
      <h3>登录页面</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机号" prop="userMobile">
          <el-input v-model="ruleForm.userMobile" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPass">
          <el-input type="password" show-password v-model="ruleForm.userPass" placeholder="请输入用户密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['user:user:register']">注册</el-button>
          </el-col>
        </el-row>
      </div>

      <div>
        <!-- 注册用户对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules1" label-width="80px">
            <el-form-item label="手机号:" prop="userMobile">
              <el-input v-model="form.userMobile" placeholder="请输入用户手机号" />
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="form.code" placeholder="请输入验证码" />
            </el-form-item>
            <el-button type="primary" @click="getsendDuanxin">获取验证码</el-button>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </div>


    </div>
  </div>
</template>

<script>
import { getLogin,getAdd,getsendDuanxin } from "@/api/user/user";

export default {
  name:'Login',
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        userMobile: null,
        userName: null,
        userPass: null,
        code:null
      },
      // 表单校验
      rules1: {
        userMobile: [{ required: true, message: "用户手机号不能为空", trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      ruleForm:{
        userMobile:'',
        userPass:'',
      },
      rules: {
        userMobile: [{ required: true, message: "用户手机号不能为空", trigger: "blur" }],
        userPass: [ { required: true, message: '请输入用户密码', trigger: 'blur' }],
      },

    }
  },
  mounted() {

  },
  methods: {
     // 表单重置
     reset() {
      this.form = {
        userMobile: null,
        userName: null,
        userPass: null,
        code:null
      };
      this.resetForm("form");
    },


    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let param = {}
            param.userMobile = this.ruleForm.userMobile;
            param.userPass = this.ruleForm.userPass;
            getLogin(param).then(res =>{
              console.log('getLogin',res)
              if(res.code === 200) {
                  this.$message.success("登录成功");
                  //存入token
                  sessionStorage.setItem('token', res.data.token);
                  //存入用户信息
                  sessionStorage.setItem('user', JSON.stringify(res.data));
                  this.$router.push('/user/list');
              }
              else{
                let msg = res.data.msg;
                this.$message.error(msg);
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // resetForm(formName) {
      //   this.$refs[formName].resetFields();
      // },

      /** 提交按钮 */
      submitAdd() {
        console.log(this.form,"-----------");
        this.$refs["form"].validate(valid => {
          if (valid) {
            getAdd(this.form).then(res => {
                console.log('getAdd',res);
                if (res.code == 200) {
                  this.$modal.msgSuccess("注册成功");
                  this.open = false;
                  // this.$router.push('/user/list');
                }
                else{
                  let msg = res.msg;
                  this.$message.error(msg);
                }

              });
          }
        });
      },
      //获取验证码
      getsendDuanxin() {
        let param = {}
        param.mobile = this.form.mobile;
        getsendDuanxin(param).then(res => {
          console.log('getsendDuanxin', res);
          if (res.code == 200) {
            this.$modal.msgSuccess("验证码获取成功,请注意查收");
          }
          else {
            let msg = res.msg;
            this.$message.error(msg);
          }

        });

      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
       /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "注册用户表";
      },


  },


}
</script>

<style>

</style>
